<!--
 * @Author: your name
 * @Date: 2021-07-24 12:50:16
 * @LastEditTime: 2021-07-24 18:40:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \fd_-web\src\custom-component\Vcomponents\General\Colck1Model.vue
-->
<template>
  <div class="echarts">
    <div style="width: 100%;height:100%;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    element: {
      type: Object,
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  computed: {
    isShow() {
      return this.element.Colckoption;
    },
    isStyle() {
      return this.element.style;
    },
  },
  watch: {
    // isShow: {
    //   handler: function(val) {
    //     // 此处注意，handler函数不能为箭头函数，this会取上下文，而不是组件里的this,此外，深度监听，必须为handler函数名，否则会无效果
    //     // this.setEchartsColors(val)
    //     this.myChart.clear();
    //     this.myChart.setOption(val);
    //   },
    //   deep: true,
    // },
    "$store.state.echartsChange": function(e) {
      this.myChart.resize({ animation: { duration: 500 } }); //echarts自适应动画
    },
    "$store.state.canvasStyleData": function(e) {
      this.myChart.resize({ animation: { duration: 500 } }); //echarts自适应动画
    },
  },
  methods: {},
  created() {},
  mounted() {
    console.log(this.element.Colckoption);

    if (this.$store.state.editMode == "preview") {
      this.myChart = echarts.init(
        document.getElementById("preview" + this.element.id)
      );
    } else {
      this.myChart = echarts.init(
        document.getElementById("component" + this.element.id)
      );
    }
    var timeUpdatedStatus = {
      second: false,
      minute: false,
      hour: false,
    };

    const updateSeries=(time, series, type) =>{
      var isCritical =
        Math.floor(time) === 0 || (type === "second" && time === 1);
      if (isCritical && timeUpdatedStatus[type] === true) {
        timeUpdatedStatus[type] = false;
        series.data[0].value = 0;
        series.clockwise = true;
        this.element.Colckoption.animationDurationUpdate = 0;
        this.myChart.setOption(this.element.Colckoption, true);
      }
      series.data[0].value = time;
      series.clockwise = true;
      if (time === 0) {
        timeUpdatedStatus[type] = true;
        series.clockwise = false;
      }
    }

    setInterval(() => {
      var date = new Date();
      var second = date.getSeconds();
      var minute = date.getMinutes() + second / 60;
      var hour = (date.getHours() % 12) + minute / 60;
      updateSeries(second, this.element.Colckoption.series[2], "second");
      updateSeries(minute, this.element.Colckoption.series[1], "minute");
      updateSeries(hour, this.element.Colckoption.series[0], "hour");

      this.element.Colckoption.animationDurationUpdate = 300;
      this.myChart.setOption(this.element.Colckoption, true);
      date = null;
    }, 1000);
    this.myChart.setOption(this.element.Colckoption);
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
  overflow: auto;
}
::-webkit-scrollbar {
  display: none;
}
</style>
